import { Carousel } from 'antd';
import { Card, Col, Row } from 'antd';
import { List, Avatar } from 'antd';


const contentStyle = {
  height: '200px',
  color: '#fff',
  textAlign: 'center',
  background: '#364d79',
}

const nihao = {
  width:  '99%',
  height: '200px'
}
// const hh2 = {
//   height: '100%',
//   width: '100%',
//   overflow: 'auto'
// }

const data = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];


const Com = () => {
  return (
    <div style = {{ width: '100%', height: '100%', overflow: 'auto',boxSizing: 'border-box'}}>

      <div style = {nihao} >
        <Carousel autoplay>
          <div>
            <h3 style={contentStyle}>1</h3>
          </div>
          <div>
            <h3 style={contentStyle}>2</h3>
          </div>
          <div>
            <h3 style={contentStyle}>3</h3>
          </div>
          <div>
            <h3 style={contentStyle}>4</h3>
          </div>
        </Carousel>
      </div>
      <div className="site-card-wrapper">
        <div className='hotArtical'>热门文章</div>
        <Row gutter={16}>
          <Col span={8}>
            <Card title="Card title" bordered={true}>
              Card content
            </Card>
          </Col>
          <Col span={8}>
            <Card title="Card title" bordered={true}>
              Card content
            </Card>
          </Col>
          <Col span={8}>
            <Card title="Card title" bordered={true}>
              Card content
            </Card>
          </Col>
        </Row>
      </div>
      <div style={{width: "99%"}}>
        <List
          itemLayout="horizontal"
          dataSource={data}
          bordered= {true}
          renderItem={item => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                title={<a href="https://ant.design">{item.title}</a>}
                description="Ant Design, a design language for background applications, is refined by Ant UED Team"
              />
            </List.Item>
          )}
        />
      </div>
    </div>

  )
}

export default Com
